<template>
  <!--列表-->
  <div class="page-filter wrap">
    <div class="breadcrumbs">
      <a href="/">首页</a>&gt;<span class="cur">散标投资列表</span>
    </div>


    <div class="invest-list mrt30 clearfix">
      <div class="hd">
        <h3>投资列表</h3>
        <div class="count">
          <ul>
            <li class="line">
              散标投资交易金额&nbsp;&nbsp;<span class="f20 bold"
            >73.54亿元</span
            >
            </li>
            <li>
              累计赚取收益&nbsp;&nbsp;<span class="f20 bold">2.52亿元</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="bd">
        <div class="invest-table clearfix">
          <div class="title clearfix">
            <ul>
              <li class="col-330">借款标题</li>
              <li class="col-180">
                <a class="" href="javascript:url('order','account_up');"
                >借款金额</a
                >
              </li>
              <li class="col-110">
                <a class="" href="javascript:url('order','apr_up');">年利率</a>
              </li>
              <li class="col-150">
                <a class="" href="javascript:url('order','period_up');"
                >借款期限</a
                >
              </li>
              <li class="col-150">还款方式</li>
              <li class="col-120">
                <a class="" href="javascript:url('order','scale_up');"
                >借款进度</a
                >
              </li>
              <li class="col-120-t">操作</li>
            </ul>
          </div>
          <!------------投资列表-------------->
          <div v-for="lend in lendList" :key="lend.id" class="item">
            <ul>
              <li class="col-330 col-t">
                <NuxtLink :to="'/lend/' + lend.id" target="_blank">
                  <i class="icon icon-zhai"></i>
                </NuxtLink>
                <NuxtLink
                    :title="lend.title"
                    :to="'/lend/' + lend.id"
                    class="f18"
                    target="_blank"
                >
                  {{ lend.title }}
                </NuxtLink>
              </li>
              <li class="col-180">
                <span class="f20 c-333"> {{ lend.amount }}元 </span>
              </li>
              <li class="col-110 relative">
                <span class="f20 c-orange">
                  {{ lend.lendYearRate * 100 }}%
                </span>
              </li>
              <li class="col-150">
                <span class="f20 c-333">{{ lend.period }}个月</span>
              </li>
              <li class="col-150">{{ lend.params.returnMethod }}</li>
              <li class="col-120">
                <div class="circle">
                  <div class="left progress-bar">
                    <div
                        :class="
                        'progress-bgPic progress-bfb' +
                          Math.floor((lend.investAmount / lend.amount) * 10)
                      "
                    >
                      <div class="show-bar">
                        {{ (lend.investAmount / lend.amount) * 100 }}%
                      </div>
                    </div>
                  </div>
                </div>
              </li>
              <li class="col-120-2">
                <NuxtLink
                    :to="'/lend/' + lend.id"
                    class="ui-btn btn-gray"
                    target="_blank"
                >
                  {{ lend.params.status }}
                </NuxtLink>
              </li>
            </ul>
          </div>
          <!------------投资列表-------------->
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import '~/assets/css/index.css'
import '~/assets/css/detail.css'

export default {
  name: "lend",
  data() {
    return {
      lendList: []
    }
  },
  methods: {
    fetchData() {
      this.$axios.$get('/site/lend/getLendList')
          .then(response => {
            this.lendList = response.data.lendList
          })
          .catch(error => {
            console.log(error);
          })
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>
